<template>
  <div class="_wz_cent_main _wz_onlineVehicle">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline @keydown.native.enter.prevent="" :rules="ruleValidate">
        <FormItem label="在线车辆" prop="onlineState">
          <i-select v-model.number="formDataSearch.onlineState" filterable placeholder="请选择在线车辆" clearable>
            <Option :value="1">今天</Option>
            <Option :value="2">当前</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit('formSearch')">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
import wzTbale from "../../../components/table/table";

export default {
  components: {
    wzTbale,//列表
  },
  data() {
    return {
      ruleValidate: {//正则
        onlineState: [
          {type: 'number',required: true, message: '请选择在线车辆', trigger: 'blur'}
        ],
      },
      spinShow:false,//本页加载
      formDataSearch: {
        onlineState:1
      },//搜索表单数据
      tableData: {
        url: this.apiUrl.webApi + "/core/vehicle/listPositionOnline",//请求地址
        method: 'post',//请求方式
        where: {onlineState:1},//搜索条件
        height: 'auto',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表格表头数据
          {type: 'index', width: 80, align: 'center', title: '序号'},
          {title: '车牌号', minWidth: 100, key: 'carPlateNo'},
          {title: '车架号', minWidth: 190, key: 'frameNo'},
          {title: '车主业户', minWidth: 100, key: 'vehicleOwnerName'},
          {title: '车主电话', minWidth: 120, key: 'vehicleOwnerPhone'},
          {title: '联系人', minWidth: 100, key: 'vehicleContactsName'},
          {title: '联系电话', minWidth: 120, key: 'vehicleContactsPhone'},
          {title: '在线时间', minWidth: 160, key: 'lastPositionDateTime'},
          {title: '最后位置', minWidth: 260, key: 'lastPositionLocation'},
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
        },
      },

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态


  },
  methods: {//执行的方法
    searchSubmit(data) {//搜索
      var that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使用
          that.tableData.where = JSON.parse(JSON.stringify(that.formDataSearch));
          that.$refs.wzTbale.tableLoadData(true);
        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_onlineVehicle {
  display: flex;
  flex-direction: column;
}
</style>
